<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .small {
            position: absolute;
            height: 20px;
            width: 20px;
            border: 3px solid pink;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <script>
        //绑定一个鼠标移动事件
        document.onmousemove = function (e) {
            var e = e || window.event;
            var box = document.createElement("div")
            box.className = "small"
            //获取鼠标移动的X轴坐标，将获取的X轴坐标给新创建div的绝对定位的left
            box.style.left = e.clientX + 'px'
            //简单来说就是把clientY的值给top，让新的div与上面的距离与鼠标位置保持一致
            box.style.top = e.clientY + 'px';
            document.body.appendChild(box)

            var i = 0;
            var timer = setInterval(function () {
                //每一次移动，就改变相应的属性
                i += 5;
                box.style.width = (20 + i) + 'px';
                box.style.height = (20 + i) + 'px';
                box.style.opacity = (50 - i) / 50;
            }, 10)
            //在100ms后执行，并清除计时器，删除创建的div
            setTimeout(function () {
                clearInterval(timer)
                box.remove;
            }, 100)
        }


    </script>
</body>

</html>